<template>
  <div class="menu-content">
    <div class="nav">
      <div class="logo"></div>
      <div class="nav-menu">
        <Menu mode="horizontal" :active-name="navName" @on-select="handTo">
          <MenuItem v-for="item in menu" :key="item.title" :name="item.title">
            {{ item.name }}
          </MenuItem>
        </Menu>
      </div>
      <div class="search-bar msg-bar">
        <Icon type="ios-search" @click="handleSearch" />
      </div>
      <div class="msg-bar">
        <Dropdown
          trigger="click"
          placement="bottom-start"
          @on-visible-change="getUnreadData"
        >
          <Badge :count="unread" :offset="[10, 0]">
            <Icon type="ios-mail-outline" />
          </Badge>
          <DropdownMenu slot="list">
            <Scroll loading-text="加载中" :on-reach-bottom="handleReachBottom">
              <DropdownItem v-for="(i, index) in unreadList" :key="index">
                <Badge :dot="i.status == 'UN_READY'">
                  <div class="unread-item" @click="handleMsg(i)">
                    <div class="unread-title">{{ i.title }}</div>
                    <div>{{ i.content }}</div>
                    <div>{{ i.createTime }}</div>
                  </div>
                </Badge>
              </DropdownItem>
            </Scroll>
          </DropdownMenu>
        </Dropdown>
      </div>
      <div class="user">
        <Dropdown>
          <Avatar v-if="userInfo.face" style="background-color: #cccccc" :src="userInfo.face" size="36" />
          <Avatar v-else icon="ios-person" size="36" />
          <div class="titleName">
            您好,{{ userInfo.nickName }}! <Icon type="md-arrow-dropdown" />
          </div>
          <DropdownMenu slot="list">
            <DropdownItem> <div @click="personHandle">个人中心</div></DropdownItem>
            <DropdownItem> <div @click="exitHandle">退出登录</div></DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </div>
    <!-- 占位符 -->
    <div class="temp" style="height: calc(180 / 1920 * 100vw)" v-if="leftMenuShow"></div>
    <div class="person-info" v-if="leftMenuShow">
      <div class="user">
        <div
          class="face"
          :style="`background-image:url(${
            userInfo.face ? userInfo.face : require('../../assets/login/face.jpeg')
          })`"
        ></div>
        <div class="user-info">
          <span class="name">{{ userInfo.nickName }}</span>
          <div class="harvest">
            <div @click="toAttention">
              <span>{{ userInfo.followNum }}</span>
              <span>关注</span>
            </div>
            <div @click="goCollection">
              <span>{{ userInfo.collectionNum }}</span>
              <span>收藏</span>
            </div>
            <div @click="goFansList">
              <span>{{ userInfo.fansNum }}</span>
              <span>粉丝</span>
            </div>
            <div style="cursor: default">
              <span>{{ userInfo.likedNum }}</span>
              <span>获赞</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="left-menu" v-if="leftMenuShow">
      <Menu :active-name="navName" width="calc(220/1920*100vw)" @on-select="chooseMenu">
        <MenuGroup>
          <div class="item-list" v-for="item in leftMenu" :key="item.title">
            <MenuItem class="menu-item" :name="item.title">
              <Icon type="md-document" />
              <span>{{ item.name }}</span>
            </MenuItem>
          </div>
        </MenuGroup>
      </Menu>
    </div>
  </div>
</template>
<script>
import Cookies from "js-cookie";
import Storage from "@/plugins/storage.js";
import { userInfo, getUnreadNews, getUnreadList, readMsg } from "../../api/otwoo.js";
import { logout } from "@/api/account.js";
import bus from '@/libs/bus.js'
export default {
  data() {
    return {
      menu: [
        { name: "首页", title: "home" },
        { name: "商城", title: "market" },
        { name: "社区", title: "community" },
        { name: "课程中心", title: "courseCenter" },
        { name: "直播中心", title: "liveCenter" },
        { name: "在线咨询", title: "onlineConsulting" },
        { name: "线下预约", title: "registered" },
        { name: "找专家", title: "expertList" },
        { name: "找场地", title: "site" },
        { name: "实践实训基地", title: "base" },
        { name: "资讯", title: "informat" },
      ],
      leftMenu: [
        { name: "个人信息", title: "personInfo" },
        { name: "设置", title: "set" },
        { name: "我的订单", title: "myOrder" },
        { name: "我的咨询", title: "myConsulting" },
        { name: "我的预约", title: "myaAppoint" },
        { name: "我的课程", title: "myCourse" },
        { name: "我的订阅", title: "mySub" },
        { name: "我的话题", title: "myTopic" },
        { name: "患者信息", title: "patientInfo" },
        { name: "锻炼信息", title: "exerciseRecord" },
      ],
      theme1: "light",
      navName: "home",
      unread: 0, // 未读信息数
      unreadList: [], //未读信息列表
      params: {
        pageNumber: 1,
        pageSize: 20,
      },
      // 侧边菜单栏
      // leftMenuShow: false,
      path: "login",
      userInfo: {
        face: null,
        nickName: "",
        followNum: "",
        collectionNum: "",
        likedNum: "",
        fansNum: "",
      },
      status: true,
    };
  },
  computed: {
    // 侧边菜单栏
    leftMenuShow() {
      return this.$store.state.perLeftMenuShow;
    },
  },
  created() {
    bus.$on("changeNav", (e) => {
      this.handTo(e);
    });
  },
  mounted() {
    bus.$on('upUserInfo',val=>{
      if (Storage.getItem("userInfo")) {
        this.userInfo = JSON.parse(Storage.getItem("userInfo"));
        console.log(8888,  this.userInfo );
    }
    })
    if (Storage.getItem("userInfo")) {
      this.userInfo = JSON.parse(Storage.getItem("userInfo"));
    }
    // this.userInfo =JSON.parse(Storage.getItem("userInfo"));
    // window.addEventListener("setItem", () => {
    //       // this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    // });
  },
  //数据监听：监听组件实例身上的属性的属性值变化
  watch: {
    //监听路由的信息是否发生变化，如果发生变化，再次发起请求
    $route(newValue, oldValue) {
      if (newValue.path == "/personInfo" || newValue.path == "/home" || newValue.path == "/myAttention" ) {
        //获取用户信息
        this.getUserInfo();
      }
      if (newValue.path != "/login") {
        this.getSession();
      }
      this.getUnread();
      this.getUnreadData();
      if (newValue.path == "/onlineConsultingDetails") {
        sessionStorage.setItem("name", "onlineConsultingDetails");
        this.$store.commit("SET_PERLEFTMENUSHOW", false);
      }
    },
  },
  methods: {
    getUserInfo() {
      userInfo().then((res) => {
        if (res.success) {
          // this.userInfo = res.result;
          localStorage.setItem("userInfo", JSON.stringify(res.result));
          Storage.setItem("userInfo", JSON.stringify(res.result));
          this.userInfo = Object.assign({}, res.result);
          this.$forceUpdate()
        }
      });
    },
    // 获取未读信息
    getUnread() {
      getUnreadNews().then((res) => {
        if (res.success) {
          this.unread = parseInt(res.result);
        }
      });
    },
    // 获取未读信息列表
    getUnreadData() {
      getUnreadList(this.params).then((res) => {
        if (res.success) {
          this.unreadList = res.result.records;
        }
      });
    },
    // 滚动加载
    handleReachBottom() {
      this.params.pageNumber++;
      return new Promise((resolve) => {
        getUnreadList(this.params).then((res) => {
          if (res.success) {
            this.unreadList = this.unreadList.concat(res.result.records);
            let total = parseInt(res.result.total);
            if (total == this.unreadList.length) {
              this.params.pageNumber--;
              this.$Message.info("已无更多消息");
            }
            resolve();
          }
        });
      });
    },
    // 站内信已读
    handleMsg(v) {
      readMsg(v.id).then((res) => {
        if (res.success) {
          this.getUnread();
          this.params.pageNumber = 1;
          this.getUnreadData();
        }
      });
    },
    //点击个人中心
    personHandle() {
      // this.leftMenuShow = true;
      this.$store.commit("SET_PERLEFTMENUSHOW", true);
      this.navName = this.leftMenu[0].title;
      this.$router.push({
        path: "/personInfo",
      });
    },
    // 跳转关注
    toAttention() {
      this.$router.push({
        path: "/myAttention",
      });
      sessionStorage.setItem("name", "myAttention");
    },
    //跳转收藏
    goCollection() {
      this.$router.push({
        path: "/myCollection",
      });
      sessionStorage.setItem("name", "myCollection");
    },
    // 跳转粉丝列表
    goFansList() {
      this.$router.push({
        path: "/fansList",
      });
    },
    // 全平台搜索
    handleSearch() {
      this.$router.push({
        path: "/searchPage",
      });
      sessionStorage.setItem("name", "searchPage");
      this.$store.commit("SET_PERLEFTMENUSHOW", false);
    },
    //切换菜单
    handTo(name) {
      // if (name === "market") return;
      this.navName = name;
      // this.leftMenuShow = false;
      this.$store.commit("SET_PERLEFTMENUSHOW", false);
      sessionStorage.setItem("name", name);
      this.$router.push({
        path: `/${name}`,
      });
    },
    // 刷新页面获取token
    getSession() {
      if (sessionStorage.getItem("name")) {
        this.navName = sessionStorage.getItem("name");
      }
      let info = Storage.getItem("userInfo");
      if (info) {
        this.userInfo = JSON.parse(info);
      }else{
        localStorage.removeItem("accessToken");
        localStorage.removeItem("refreshToken");
      }
      // this.$router.push({
      //   path: `/${this.navName}`,
      // });
    },
    //左侧边栏菜单选中
    chooseMenu(name) {
      this.navName = name;
      sessionStorage.setItem("name", name);
      this.$router.push({
        path: `/${name}`,
      });
    },
    //退出登录
    exitHandle() {
      Cookies.remove("userInfoManager");
      localStorage.removeItem("accessToken");
      localStorage.removeItem("refreshToken");
      localStorage.removeItem("userInfo");
      localStorage.removeItem("siteName");
      localStorage.removeItem("siteId");
      this.$store.commit("SET_PERLEFTMENUSHOW", false);
      // this.$router.push("/login");
      logout().then((res) => {
        if (res.code == 200) {
          Storage.setItem("userInfo",null)
          Cookies.remove("userInfoManager");
          localStorage.removeItem("accessToken");
          localStorage.removeItem("refreshToken");
          localStorage.removeItem("userInfo");
          localStorage.removeItem("siteName");
          localStorage.removeItem("siteId");
          this.$store.commit("SET_PERLEFTMENUSHOW", false);
          this.$router.push("/login");
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.nav {
  width: 100%;
  height: calc(80 / 1920 * 100vw);
  background: #414141;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  .logo {
    width: calc(309 / 1920 * 100vw);
    height: calc(31 / 1920 * 100vw);
    background-image: url("../../assets/home/logo@2x.png");
    background-size: cover;
    margin-left: calc(27 / 1920 * 100vw);
  }
  .nav-menu {
    height: calc(80 / 1920 * 100vw);
    :deep(.ivu-menu-horizontal) {
      height: calc(80 / 1920 * 100vw);
      line-height: calc(80 / 1920 * 100vw);
      background: #414141;
    }
    :deep(.ivu-menu-item-active) {
      border-bottom-color: #ff5c58 !important;
      width: auto;
    }

    :deep(.ivu-menu-item) {
      border-bottom-color: #414141;
    }
  }
  .search-bar {
    margin-left: calc(85 / 1920 * 100vw);
  }
  .msg-bar {
    padding: calc(17 / 1920 * 100vw);
    font-size: calc(30 / 1920 * 100vw);
    color: #ffffff;
    .ivu-icon:hover {
      cursor: pointer;
      color: #ff5c58;
    }
    .ivu-dropdown-menu {
      max-height: calc(600 / 1920 * 100vw);
      width: calc(334 / 1920 * 100vw);
      ::v-deep .ivu-scroll-container {
        height: auto !important;
        max-height: calc(600 / 1920 * 100vw);
        overflow: hidden auto;
      }
    }
    ::v-deep(.ivu-badge-count) {
      position: absolute;
      transform: translateX(50%);
      top: calc(-10 / 1920 * 100vw);
      right: 0;
      height: calc(20 / 1920 * 100vw);
      border-radius: calc(10 / 1920 * 100vw);
      min-width: calc(20 / 1920 * 100vw);
      line-height: calc(18 / 1920 * 100vw);
      padding: 0 calc(6 / 1920 * 100vw);
      font-size: calc(12 / 1920 * 100vw);
      box-shadow: 0 0 0 0.0625rem #fff;
    }
  }
  .user {
    position: relative;
    display: flex;
    height: calc(80 / 1920 * 100vw);
    margin-left: calc(34 / 1920 * 100vw);
    align-items: center;
    .user-head {
      width: calc(36 / 1920 * 100vw);
      height: calc(36 / 1920 * 100vw);
      border-radius: calc(18 / 1920 * 100vw);
      background-size: cover;
    }
    .welcome {
      margin-left: calc(10 / 1920 * 100vw);
      font-size: calc(12 / 1920 * 100vw);
      color: #f4f6f8;
    }
    .modal {
      position: absolute;
      right: 0;
      top: calc(80 / 1920 * 100vw);
      background: #fff;
      z-index: 1000;
      > span {
        display: block;
        height: calc(60 / 1920 * 100vw);
        width: calc(136 / 1920 * 100vw);
        text-align: center;
        line-height: calc(60 / 1920 * 100vw);
        cursor: pointer;
      }
      > span:hover {
        background: gainsboro;
      }
    }
  }
}
.person-info {
  width: 100%;
  height: calc(180 / 1920 * 100vw);
  padding: 0px calc(55 / 1920 * 100vw);
  background-image: url("../../assets/home/bg.png");
  background-size: cover;
  display: flex;
  align-items: center;
  position: fixed;
  top: calc(80 / 1920 * 100vw);
  left: 0;
  z-index: 999;
  .user {
    display: flex;
    align-items: center;
    .face {
      width: calc(129 / 1920 * 100vw);
      height: calc(129 / 1920 * 100vw);

      background-size: cover;
      // border: 1px solid red;
      border-radius: 100%;
    }
    .user-info {
      color: #fff;
      margin-left: calc(44 / 1920 * 100vw);
      .name {
        font-size: calc(30 / 1920 * 100vw);
      }
      .harvest {
        display: flex;
        margin-top: calc(25 / 1920 * 100vw);
        > div {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          margin-left: calc(50 / 1920 * 100vw);
          > span:first-of-type {
            font-size: calc(24 / 1920 * 100vw);
          }
          > span:last-of-type {
            font-size: calc(14 / 1920 * 100vw);
            cursor: pointer;
          }
        }
        > div:first-of-type {
          margin-left: 0px;
        }
      }
    }
  }
}
.titleName {
  cursor: pointer;
  color: #f4f6f8;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 5.625rem;
  vertical-align: middle;
  margin-left: .625rem;
}
.unread-item {
  width: calc(300 / 1920 * 100vw);
  color: #808080;
  font-size: calc(14 / 1920 * 100vw);
  border-bottom: 1px solid #e7e7e7;
  padding: 10px 0;
  white-space: normal;
  .unread-title {
    color: #000000;
    font-size: calc(15 / 1920 * 100vw);
  }
}
//修改ui框架样式
:deep(.ivu-menu-horizontal .ivu-menu-item) {
  display: flex !important;
  justify-content: space-between !important;
}

:deep(.ivu-menu-horizontal .ivu-menu-item) {
  color: #c9c7c7 !important;
  font-size: calc(18 / 1920 * 100vw);
  padding: 0px calc(22 / 1920 * 100vw);
}
:deep(.ivu-menu-horizontal .ivu-menu-item:hover) {
  color: #fff !important;
  background: #333333;
}
:deep(.ivu-menu-horizontal .ivu-menu-item-selected) {
  color: #fff !important;
  background: #333333;
}
:deep(.ivu-menu-item-group) {
  background: #f8f8f9;
  width: calc(220 / 1920 * 100vw);
}
:deep(.ivu-menu-item-group-title) {
  display: none;
}
:deep(.item-list) {
  padding-bottom: calc(16 / 1920 * 100vw) !important;
  background: #fff;
  margin: 0 !important;
}
:deep(.item-list:first-of-type) {
  padding-top: calc(25 / 1920 * 100vw);
  margin-top: 25px !important;
}
:deep(.item-list:nth-of-type(3)) {
  padding-top: calc(25 / 1920 * 100vw);
  margin-top: 25px !important;
}
:deep(.menu-item) {
  background: #fff;
}
</style>
